import { useColor } from "@/hooks/color";
import { useLoadedFontFamilyByAction } from "@/hooks/font";
import { AppDispatch, RootState } from "@/stores";
import { listTaskItem } from "@/stores/tasks/item";
import { taskDateTimerSlice } from "@/stores/tasks/timer";
import { Ionicons } from "@expo/vector-icons";
import { router, useFocusEffect } from "expo-router";
import moment from "moment";
import React, { useCallback, useEffect } from "react";
import { TouchableOpacity } from "react-native";
import { Text, View } from "react-native-ui-lib";
import { useDispatch, useSelector } from "react-redux";

interface ITimerShowProps {}

const TimerShow: React.FC<ITimerShowProps> = () => {
  const timer = useSelector<RootState, Slice.IItemTaskTimerSlice>(state => state.timer);
  const action = useDispatch<AppDispatch>();
  useFocusEffect(
    useCallback(() => {
      action(listTaskItem(timer));
    }, [timer])
  );

  const onPressByChangeTimer = () => router.navigate({ pathname: "/(modal)/timer" });
  const onPressByChangeItem = () => console.log("change");

  return (
    <View className='flex w-full flex-row justify-between items-center my-1'>
      <TouchableOpacity className='flex gap-1 flex-row justify-center items-center' onPress={onPressByChangeTimer}>
        <Ionicons name='calendar-outline' size={24} color={useColor().colors.text} />
        <Text
          className='flex text-3xl font-serif font-semibold mt-2'
          style={{ color: useColor().color.timer, ...useLoadedFontFamilyByAction("SPACE_MONO") }}>
          {moment(new Date(timer?.date)).format("MM/DD/YYYY")}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity className='flex flex-row justify-center items-center' onPress={onPressByChangeItem}>
        <Ionicons name='file-tray-full-outline' size={24} color={useColor().colors.text} />
      </TouchableOpacity>
    </View>
  );
};

export default TimerShow;
